<template>
  <div>
    <form action="" v-if="!isReg">
      <p>用户名</p>
      <input type="text" v-model="name">
      <p>密码</p>
      <input type="password" v-model="password">
      <button type="button" @click="login()">登录</button>
      <button type="button" @click="reg()">注册</button>
    </form>

    <form action="" v-else>
      <p>用户名</p>
      <input type="text" v-model="name">
      <p>密码</p>
      <input type="password" v-model="password">
      <p>再次输入密码</p>
      <input type="password" v-model = repeat>
      <button type="button" @click="addUser()">确定</button>
      <button type="button" @click="cancel()">取消</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      isReg: false,
      name: '',
      password: '',
      repeat: ''
    }
  },
  methods: {
    login () {
      // 路由跳转到home/list
      if (localStorage.getItem('name') === this.name && localStorage.getItem('password') === this.password) {
        this.name = ''
        this.password = ''
        this.$router.push('/home/list')
      } else {
        alert('用户名或者密码不正确！')
      }
      // this.$router.push('/home/list')
    },
    reg () {
      this.isReg = true
    },
    cancel () {
      this.isReg = false
    },
    addUser () {
      if (this.password !== this.repeat) {
        alert('两次输入的密码不一致!')
        return
      }
      localStorage.setItem('name', this.name)
      localStorage.setItem('password', this.password)
      localStorage.setItem('repeat', this.repeat)
      this.name = ''
      this.password = ''
      this.repeat = ''
      this.isReg = false
    }
  }
}
</script>

<style scoped>

</style>
